<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表排序</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
    
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入姓名..." v-model="keyword">
      <button @click="sortType = 2">年龄升序</button>
      <button @click="sortType = 1">年龄降序</button>
      <button @click="sortType = 0">原序</button>
      <ul>
        <li v-for="p in filPersons" :key="p.id">
          {{p.name}} ---- {{p.age}} ---- {{p.sex}}
        </li>
      </ul>

   </div>
    <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
              keyword:'',
              // (4) 以后如果有多种类型就不放设置一个类型变量，很方便
              sortType:0,
              persons:[
                {id:1, name:'马冬梅', age:18, sex:"女"},
                {id:2, name:'周冬雨', age:10, sex:"女"},
                {id:3, name:'周杰伦', age:28, sex:"男"},
                {id:4, name:'温兆伦', age:21, sex:"男"}
              ],
            },
            computed:{
              filPersons(){

                  const arr = this.persons.filter((p)=>{    
                              return p.name.indexOf(this.keyword) !== -1
                            })
                  if(this.sortType){
                      // (1) 排序选择以后尽量写在sort里面
                      arr.sort((p1,p2)=>{
                      // (2) 以后if else的选择尽量使用三元表达式，太简洁了
                        return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age
                      })
                  }
                 
                  
                  // (3) 很有可能上面的if并没有执行，那么就没有返回值，因此必须要把所有情况考虑进去
                  return arr
              }
           },
        })
    </script>
</body>
</html>